const headerEl = document.querySelector("header");
const scrollToTop = document.querySelector(".scrollToTop");

window.addEventListener('scroll', () => {
    let height = headerEl.getBoundingClientRect().height;
    if (window.pageYOffset - height > 450) {
        if (!headerEl.classList.contains('sticky')) {
            headerEl.classList.add('sticky');
        }
    }else{ 
        headerEl.classList.remove('sticky')
    }

    if (window.pageYOffset > 2000) {
        scrollToTop.style.display = "block"
    }else{
        scrollToTop.style.display = "none"
    }
})


// 加载类名为glide的div给glide库
const glide = new Glide(".glide");

const captionsEl = document.querySelectorAll(".slide-caption");

glide.on(["mount.after","run.after"],() => {
    // 返回当前轮播的索引（下标）
    const caption = captionsEl[glide.index]
    anime({
        targets: caption.children,
        opacity: [0,1],
        // 透明度是从0 到 1 
        duration: 400,
        // 动画执行时间，400ms
        easing:"linear",
        // 动画执行函数,  linear线性 也就是平滑执行
        delay:anime.stagger(400,{start: 300}),
        // anime.stagger()设定交错开始值, 延迟第一个元素从300ms开始，然后之后每隔元素元素增加400ms
        translateY: [anime.stagger([40,10]),0]
         // 从y轴出现的距离，40到10，第一个最长，最后一个最短，最终到0  自己的位置
    });
});
glide.on("run.before",() => {
    document.querySelectorAll(".slide-caption > * ").forEach(el => {
        el.style.opacity = 0
    })
})

glide.mount();

const isotope = new Isotope(".cases",{
    layoutMode: "fitRows",
    itemSelector:'.case-item'
});
const filterBtns = document.querySelector('.filter-btns');

filterBtns.addEventListener("click", e => {
    let {target} = e;
    const filterOption = target.getAttribute("data-filter");
    if (filterOption) {
        document.querySelectorAll(".filter-btn.active").forEach(btn => {
            btn.classList.remove("active");
            target.classList.add("active");

        isotope.arrange({ filter: filterOption});
        })
    }
});

const staggeringOption = {
    delay: 300,
    distance: "50px",
    duration: 500,
    easing: "ease-in-out",
    origin: "bottom"
}
// 滑动动画
ScrollReveal().reveal(".feature",{...staggeringOption, interval: 350 })
ScrollReveal().reveal(".service-item",{...staggeringOption, interval: 350 })


const dataSectionEl = document.querySelector(".data-section");

ScrollReveal().reveal(".data-section",{
    beforeReveal: () => {
        anime({
            targets: ".data-piece .num",
            innerHTML: el => {
                return [0, el.innerHTML]
            },
            duration: 2000,
            round: 1,
            easing: "easeInExpo"
        });
        dataSevtionEl.style.backgroundPosition = `center calc(50% - ${dataSevtionEl.getBoundingClientRect().bottom / 5} px)`;
    }         
});

window.addEventListener("scroll", () => {
    const bottom = dataSectionEl.getBoundingClientRect().bottom;
    const top = dataSectionEl.getBoundingClientRect().top;

    if (bottom >= 0 && top <= window.innerHeight) {
        dataSevtionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5} px)`;
    }
})
 
// 点击菜单滑动效果
const scroll = new SmoothScroll('nav a[href*="#"], .scrollToTop a[href*="#"]', {
    header: 'header',
    offset: 80
  })

const exploreBtnEls = document.querySelectorAll('.explore-btn')
exploreBtnEls.forEach(exploreBtnEl => {
  exploreBtnEl.addEventListener('click', () => {
    scroll.animateScroll(document.querySelector('#about-us'))
  })
})

// 折叠按钮
const burgerEl = document.querySelector('.burger')
burgerEl.addEventListener('click', () => {
  headerEl.classList.toggle('open')
})




